<template>
    <div >
<!--        头部导航-->
       <div class="top-adv">
           <div><img src="http://course.myhope365.com/img/logo-header.08ec1297.png" alt=""></div>
           <div  v-show="isShow">
               <el-menu  class="el-menu-demo" mode="horizontal" >
                   <el-menu-item index="1">首页</el-menu-item>
                   <el-submenu index="2">
                       <template slot="title">课程分类</template>
                       <el-menu-item index="2-1" v-for="(item,index) in advList" :key="index">{{item.title}}</el-menu-item>

                   </el-submenu>
                   <el-menu-item index="3">专属课程</el-menu-item>
               </el-menu>
           </div>
           <div class="search-box">
               <div><input type="text" placeholder="搜索课程"></div>
               <span class="el-icon-search"><span></span><span>搜索</span></span>
           </div>
           <div class="icon" v-if="$store.state.isLogin==false">
               <span class="el-icon-shopping-cart-2"></span><span @click="loginPop">登录/注册</span><div class="ball-black"><span class="el-icon-user"></span></div>
           </div>
           <div class="icon" v-else >
               <el-dropdown>
  <span class="el-dropdown-link">
      <span class="el-icon-shopping-cart-2 car-1"></span><span>{{$store.state.userInfo.nickname}}</span><div class="ball-black-1"><img :src="$store.state.userInfo.avatarUrl" alt=""></div>
  </span>
                   <el-dropdown-menu slot="dropdown">
                       <div @click="goPerson"><el-dropdown-item>个人中心</el-dropdown-item></div>
                       <div @click="logout"><el-dropdown-item>退出登陆</el-dropdown-item></div>
                   </el-dropdown-menu>
               </el-dropdown>
           </div>

       </div>
<login :loginType="loginType"></login>
    </div>
</template>

<script>
    import {getDropDownList} from "../api";
    import login from "./login"
    import {logOut, viewUserInfo} from "../api/login";

    export default {
        name: "topAdv",
        data(){
            return {
                advList:[],//下拉菜单内容
                loginType: false

            }
        },
        props:{
            isShow:Boolean//下拉菜单显示
        },
        methods:{
        loginPop(){
            this.loginType=!this.loginType
        },
            logout(){//下拉菜单里面的退出登录
                logOut().then(()=>{
                    this.$message({
                        message: '退出登录成功',
                        type: 'success'
                    });

                    this.$store.commit("modifyLoginType",{isLogin:false,userInfo:{}});
                    window.location.href="/index"

             })

            },
            goPerson(){//下拉菜单中的去个人中心页
                // console.log(111)
                window.location.href="/personalCenter"
            },
        },

        components:{
          login
        },
        created() {
            getDropDownList().then(res=>{
                // console.log(res)
                this.advList=res.rows
            })
            viewUserInfo().then(res=>{
                console.log(res)
            })
        },
    }
</script>

<style scoped lang="less">
    .car-1 {
        margin-right: 10px;
        font-size: 20px;
    }
    .ball-black {
        margin-left: 8px;
        margin-top: -5px;
        float: right;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        text-align: center;
        line-height: 32px;
        background: #ddd;
    }
    .ball-black-1 {
        margin-left: 8px;
        margin-top: -5px;
        float: right;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        text-align: center;
        line-height: 32px;
        /*background: #ddd;*/
    }
    .ball-black-1>img {
        width: 100%;
        height: 100%;
    }
        /*字体图标*/
    .icon {
        margin-top: 25px!important;
    }
    .icon:hover {
        cursor: pointer;
    }
    .icon>span:nth-of-type(1) {
        font-size: 20px;
        padding-right: 4px!important;
        border-right: 1px solid #ddd;
    }
    .icon>span:nth-of-type(2) {
        padding-left:10px!important; ;
    }
    .el-menu-demo {
        border-bottom: 0px !important;
        width: 270px;
        .el-menu-item {
            padding-right: 12px!important;
        }
    }
    /*头部导航*/
    .top-adv {
        margin-top: 20px !important;
        display: flex;
        justify-content: space-around;
    }
    /*搜索框*/
    .search-box {
        margin-top: 15px!important;
        width: 390px;
        height: 38px;
        /*border: 1px solid gray;*/
        /*border-radius: 35%;*/
        input {
            float: left;
            width: 280px;
            height: 24px;
            border: 1px solid #d9d9d9;
            outline: 0;
            font-size: 16px;
            padding: 6px 11px!important;
            border-radius: 15px 0 0 15px;
        }
        input:hover {
            border: 1px solid #23db9b;
        }
        span{
            text-align: center;
            width: 83px;
            height: 38px;
            background: rgb(0, 207, 140);
            color: white;
            line-height: 38px;
            border-radius:0 15px 15px 0;
        }
        span:hover {
            cursor:pointer;
        }



    }





</style>